<template>
  <div class="input-area">
    <div class="input-container">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="输入你的问题..."
        v-model="inputMessage"
        @keydown.enter.exact.prevent="handleSend"
        resize="none"
      ></el-input>

      <el-button
        type="primary"
        class="send-button"
        @click="handleSend"
        :disabled="!inputMessage.trim()"
      >
        发送
      </el-button>
    </div>

    <div class="footer">
      <span>DeepSeek Chat · 免费使用</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputArea',
  data() {
    return {
      inputMessage: ''
    }
  },
  methods: {
    handleSend() {
      if (this.inputMessage.trim()) {
        this.$emit('send', this.inputMessage)
        this.inputMessage = ''
      }
    },
  }
}
</script>

<style scoped>
.input-area {
  border-top: 1px solid #e6e6e6;
  padding: 15px;
  background-color: #fff;
}

.toolbar {
  margin-bottom: 10px;
}

.input-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.send-button {
  height: 74px;
  margin-left: 10px;
}

.footer {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #999;
}
</style>
